<template>
  <div v-if="type==='extend'" class="jdd-switch">
    <span :class="!isOpen?`jdd-switch-title${size} title-active`:`jdd-switch-title${size}`">{{leftText}}</span>
    <i-switch v-model="isOpen" v-bind="$attrs" @on-change="handleChangeType">
      <slot name="open" slot="open"></slot>
      <slot name="close" slot="close"></slot>
    </i-switch>
    <span :class="isOpen?`jdd-switch-title${size} title-active`:`jdd-switch-title${size}`">{{rightText}}</span>
  </div>
  <i-switch v-else v-model="isOpen" v-bind="$attrs" @on-change="handleChangeType">
    <slot name="open" slot="open"></slot>
    <slot name="close" slot="close"></slot>
  </i-switch>
</template>
<script>
export default {
  name: 'Jdd-Switch',
  model: {
    value: '',
    event: 'parent-event'
  },
  data () {
    return {
      isOpen: false,
      size: ''
    }
  },
  methods: {
    handleChangeType () {
      this.$emit('on-change', this.isOpen)
    }
  },
  mounted () {
    this.size = this.$attrs['size'] || ''
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    leftText: {
      type: String,
      default: ''
    }
  },
  watch: {
    value (val) {
      this.isOpen = val
    },
    isOpen (val) {
      console.info('val', val)
      this.$emit('parent-event', val)
    }
  }
}
</script>
<style lang="less" scoped>
.jdd-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .jdd-switch-title,.jdd-switch-titlelarge{
    font-size: 16px;
  }
  .jdd-switch-titlesmall{
    font-size: 14px;
  }
  .title-active{
    color:#2D8CF0;
  }
  .ivu-switch {
    border-color: #2d8cf0;
    background-color: transparent;
    margin:0px 8px;
  }
  .ivu-switch:after {
    background-color: #2d8cf0;
  }
}
</style>
